<template>
	<view class="classroom">
		<view class="banner" v-if="mainInfo.adv && mainInfo.adv.length > 0">
			<uni-swiper-dot :info="mainInfo.adv" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item, index) in mainInfo.adv" :key="index">
						<view class="swiper-item">
							<image :src="item.cover" mode="aspectFill" @click="jump(item.jump_type, item.jump_link)"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<scroll-view class="scroll" scroll-x="true" show-scrollbar="false" v-if="mainInfo.cateList && mainInfo.cateList.length > 0">
			<view :class="index == selindex ? 'scroll-item hover' : 'scroll-item'" v-for="(item, index) in mainInfo.cateList" :key="index"
			 @click="selCate(index)">
				<text>{{item.title}}</text>
			</view>
		</scroll-view>
		<view class="content" v-for="(item, index) in pageResult.list" :key="index" @click="jump('article_view', item.id)">
			<image :src="item.cover" mode="aspectFill"></image>
			<view class="right">
				<view class="title">{{item.title}}</view>
				<view class="time">{{item.create_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				mainInfo: {},
				selindex: 0,
				pageParam: {
					cateId: 0,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					selectedBackgroundColor: '#FFC600',
					selectedBorder: '1px rgba(255,198,0,1) solid',
					border: '1px rgba(255,255,255,0.3) solid',
					selectedBorder: '1px rgba(255,198,0,1) solid'
				}, //轮播图样式配置
				current: 0,
				mode: 'round',
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getMainInfo() {
				var self = this;
				serve.request({
					url: '/article/article/head',
					data: {}
				}).then(res => {
					self.mainInfo = res.data;
					if(self.pageParam.cateId != 0) {
						self.mainInfo.cateList.forEach((item,key) => {
							if(item.id == self.pageParam.cateId) {
								self.selindex = key;
							}
						});
					}
				});
			},
			loadList() {
				var self = this;
				self.pageParam.page++
				serve.request({
					url: '/article/article/index',
					data: self.pageParam
				}).then(res => {
					if (res.data && res.data.length > 0) {
						self.pageResult.list=self.pageResult.list.concat(res.data);
					}
					self.pageResult.isEmpty = self.pageResult.list.length == 0;
					self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			selCate(key) {
				let cateId = this.mainInfo.cateList[key].id;
				this.pageParam.page=0;
				this.pageResult.list=[];
				this.pageParam.cateId = cateId;
				this.selindex = key;
				this.loadList();
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.pageParam.cateId = options.cateId || 0;
			// this.selindex = !options.cateId ? 0 : options.cateId;
			this.getMainInfo();
			this.loadList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getMainInfo();
			this.loadList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.loadList()
		}
	};
</script>

<style lang="scss" scoped>
	.classroom {
		::-webkit-scrollbar {
			/*隐藏滚轮*/
			display: none;
		}

		width: 100%;
		padding-bottom: 140upx;

		.banner {
			// width: 100%;
			// height: 400upx;
			// image {
			// 	width: 100%;
			// 	height: 400upx;
			// }
			.swiper-box {
				width: 100%;
				height: 500upx !important;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 500upx;
				}
			}
		}

		.scroll {
			width: calc(100% - 34upx);
			padding: 20upx 34upx;
			height: 60upx;
			white-space: nowrap;
			border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;

			.scroll-item:first-child {
				margin-left: 0upx;
			}

			.hover {
				border-bottom: 8upx rgba(251, 202, 63, 1) solid;
			}

			.scroll-item {

				padding: 0upx 10upx;
				display: inline-flex;
				height: 28upx;
				margin-left: 28upx;
				font-size: 28upx;
			}
		}

		.content {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			box-shadow: border-box;
			padding: 30upx;
			border-bottom: 1upx #EBEBEB solid;

			image {
				width: 240upx;
				height: 168upx;
				border-radius: 2%;
			}

			.right {
				display: flex;
				position: relative;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 26upx;
				height: 168upx;
				width: 417upx;

				.title {
					font-size: 32upx;
					//font-weight: bold;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.time {
					font-size:24upx;
					font-weight:400;
					color:rgba(57,72,107,0.5);
				}
			}
		}
	}
</style>
